<template>
	<view class="all">
		<view class="top">
		
		</view>
		<!-- 上部头像 -->
		<view class="head">
			
			<view class="picture">
				<image src="../../static/images/cys/mine-1.jpg" mode=""></image>
			</view>
			<view class="information">
				<view class="information-one">
					<text>BruceK</text>
					<text class="iconfont icon-nanxing"></text>
					<text class="iconfont icon-bianxie"></text>
				</view>
				<view class="information-two">
					<view class="two-left">
						<text>粉丝 2</text>
					</view>
					<view class="two-right">
						<text>关注 16</text>
					</view>
				</view>
				<text class="information-Three">这个案件收付款</text>
			</view>
		</view>
		<!-- 	第二部分 -->
		<view class="three-content">
			<view class="content-one">
				<text>8</text>
				<text>行程</text>
			</view>
			<text class="iconfont icon-vertical_line DividingLine"></text>
			<view class="content-one">
				<text>24</text>
				<text>脚印</text>
			</view>
			<text class="iconfont icon-vertical_line DividingLine"></text>
			<view class="content-one">
				<text>0</text>
				<text>动态</text>
			</view>
		</view>
		<!-- 中间蒙层 -->
		<view class="mask">

		</view>
		<!-- 个人商城 -->
		<view class="PersonalMall">
			<text>个人商城</text>
			<view class="PersonalOne">
				<view class="PersonalTwo" @click="goOrder">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>我的订单</text>
				</view>
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-2.webp" mode=""></image>
					<text>收藏宝贝</text>
				</view>
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>我的里程</text>
				</view>
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>收货地址</text>
				</view>
			</view>
		</view>
		<!-- 中间蒙层 -->
		<view class="mask">

		</view>
		<!-- 行程助手 -->
		<view class="assistant">
			<text>行程助手</text>
			<view class="assistantOne">
				<view class="PersonalTwo" @click="goCollect">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>我的收藏</text>
				</view>
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>我的循迹</text>
				</view>
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>我的活动</text>
				</view>
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>目的地</text>
				</view>

			</view>
			<view class="assistantOne">
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>最近浏览</text>
				</view>
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>消息通知</text>
				</view>
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>离线地图</text>
				</view>
				<view class="PersonalTwo">
					<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					<text>设置</text>
				</view>
			</view>
		</view>
		<!-- 中间蒙层 -->
		<view class="mask">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			goOrder() {
				uni.navigateTo({
					url: '/pages/myOrder/myOrder'
				})
			},
			goCollect() {
				uni.navigateTo({
					url: '/pages/collect/collect'
				})
			}
		}
	}
</script>

<style>
	.all {
		width: 750rpx;
		margin: auto;
	}

	.head {
		width: 750rpx;
		height: 250rpx;
		display: flex;
		background-color: #25DBC3;
	}

	.top {
		width: 750rpx;
		height: 30rpx;
		background-color:#25DBC3;
	}

	.picture {
		width: 200rpx;
		height: 200rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
	}

	.picture>image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		margin-top: 25rpx;
	}

	.information {
		width: 500rpx;
		height: 250rpx;
		/* line-height: 130rpx; */
	}

	.information-one {
		width: 500rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.information-one>text:nth-of-type(1) {
		font-size: 14px;
		color: white;
		margin-right: 15rpx;
	}

	.information-one>text:nth-of-type(2) {
		font-size: 14px;
		color: white;
		margin-right: 275rpx;
	}

	.information-one>text:nth-of-type(3) {
		font-size: 18px;
		color: white;
		font-weight: 400;
	}

	.information-two {
		width: 500rpx;
		/* height: 50rpx; */
		display: flex;
	}

	.two-left {
		width: 150rpx;
		height: 50rpx;
		line-height: 45rpx;
		text-align: center;
		margin-right: 20rpx;
		border: 1px solid white;
	}

	.two-left>text {
		font-size: 13px;
		color: white;
	}

	.two-right {
		width: 150rpx;
		height: 50rpx;
		line-height: 45rpx;
		text-align: center;
		border: 1px solid white;
	}

	.two-right>text {
		font-size: 13px;
		color: white;
	}

	.information-Three {
		display: block;
		font-size: 13px;
		color: white;
		margin-top: 25rpx;
	}

	.three-content {
		width: 750rpx;
		height: 200rpx;

		box-sizing: border-box;
		display: flex;
		padding: 15rpx 15rpx 15rpx 15rpx;
	}

	.content-one {
		width: 250rpx;
		/* height: 200rpx; */
		/* line-height: 200rpx; */
		text-align: center;
	}

	.content-one>text:nth-of-type(1) {
		font-size: 20px;
		display: block;
		color: #16CDA8;
		margin-top: 30rpx;
	}

	.content-one>text:nth-of-type(2) {
		font-size: 14px;
	}

	.DividingLine {
		font-size: 40px;
		color: #EDEEED;
		font-weight: 200;
		margin-top: 30rpx;
	}

	.mask {
		width: 750rpx;
		height: 30rpx;
		background-color: #F8F8F8;
	}

	.PersonalMall {
		width: 700rpx;
		height: 270rpx;
		margin-left: 25rpx;
		padding-top: 15rpx;
	}

	.PersonalMall>text {
		font-size: 14px;
	}

	.PersonalOne {
		width: 700rpx;
		height: 270rpx;
		display: flex;
		margin-top: 30rpx;
	}

	.PersonalTwo {
		width: 175rpx;
		height: 200rpx;
		text-align: center;
	}

	.PersonalTwo>image {
		width: 110rpx;
		height: 110rpx;
	}

	.PersonalTwo>text {
		font-size: 14px;
		display: block;
	}

	.assistant {
		width: 700rpx;
		height: 470rpx;
		margin-left: 25rpx;
		padding-top: 15rpx;
	}

	.assistant>text {
		display: block;
		font-size: 14px;
		margin-bottom: 30rpx;
	}


	.assistantOne {
		width: 700rpx;
		height: 200rpx;
		display: flex;
		align-content: center;
		/* margin-top: 30rpx; */
	}
</style>
